<script setup lang="ts">
import axios from 'axios';
import { ref, watch } from 'vue';
import { ArticleItem, ArticleResData } from '../types/data';
import { useChannelStore } from '../store/channel'

const channelStore = useChannelStore()

const list = ref<ArticleItem[]>([])

// 思考：列表数据什么时候会变？当 channel_id 变化时
// 普通数据要用函数返回值来侦听
watch(() => channelStore.channel_id, async () => {
  // 第一次时候，不会自动触发侦听器回调
  const res = await axios<ArticleResData>({
    method: 'GET',
    url: 'http://geek.itheima.net/v1_0/articles',
    params: {
      channel_id: channelStore.channel_id,
      timestamp: Date.now()
    }
  })

  list.value = res.data.data.results
}, { immediate: true })

</script>

<template>
  <div class="article-list">
    <div v-for="v of list" :key="v.art_id" class="article-item">
      <p class="title">{{ v.title }}</p>

      <img v-for="v2 of v.cover.images" class="img" :src="v2" alt="">

      <div class="info">
        <span>{{ v.aut_name }}</span>
        <span>{{ v.comm_count }}评论</span>
        <span>{{ v.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
